<template>
  <div class="mine">
    <Header :user="info" @handleClick="toUserDetail"/>
    <div class="wrap my-order">
      <div class="title" @click="handleLink(`/pages/order/Index?active=0`)">
        <p>我的订单</p>
        <img :src="IconRight" alt srcset>
      </div>
      <div class="menu-wrap">
        <Item
          text="待配送"
          :badge="order_count"
          :icon="icon.icon0"
          @go="handleLink(`/pages/order/Index?active=1`)"
        />
        <Item
          text="已取消"
          :badge="unread.cancel"
          :icon="icon.icon1"
          @go="handleLink(`/pages/order/Index?active=2`)"
        />
        <Item
          text="已完成"
          :badge="unread.done"
          :icon="icon.icon2"
          @go="handleLink(`/pages/order/Index?active=3`)"
        />
        <Item
          text="退还水桶"
          :badge="unread.retreat"
          :icon="icon.icon3"
          @go="handleLink('/pages/handback/Index')"
        />
      </div>
    </div>

    <div class="wrap my-service">
      <div class="title">
        <p>我的服务</p>
      </div>
      <div class="menu-wrap">
        <Item text="我的水票" :icon="icon.icon4" @go="handleToMiniTicket"/>
        <Item text="我的邀请" :icon="icon.icon5" @go="handleLink('/pages/invite/Index')"/>
        <Item text="我要分红" :icon="icon.icon6" @go="handleToMiniFenhong"/>
        <Item
          text="消息中心"
          :badge="msg_count"
          :icon="icon.icon7"
          @go="handleLink('/pages/message/Index')"
        />
        <Item text="收货地址" :icon="icon.icon8" @go="handleLink('/pages/address/Index')"/>
        <Item text="水票记录" :icon="icon.icon9" @go="handleLink('/pages/ticketrecord/index')"/>
        <Item text="购票记录" :icon="icon.icon10" @go="handleLink('/pages/buyrecord/index')"/>
        <Item text="联系电话" :icon="icon.icon11" @go="handlePhone"/>
        <Item text="关于我们" :icon="icon.icon12" @go="handleLink('/pages/about/index')"/>
      </div>
    </div>

    <Menu active="2" class="bt"/>
  </div>
</template>

<script>
import api from "../../api";
import avatar from "../../assets/avatar/avatar.jpeg";
import Header from "@/components/mine/Header";
import Item from "@/components/mine/Item";
import Menu from "@/components/common/Menu";
import { icon } from "../../api/icon";
import IconRight from "../../assets/common/icon-right.png";

export default {
  components: { Header, Item, Menu },
  title: "个人中心",
  data() {
    return {
      uid: this.$store.state.uid,
      icon,
      avatar,
      IconRight,
      user: "高姿态的炫耀",
      info: {},
      msg_count: 0,
      order_count: 0,
      unread: {
        wait: 1,
        cancel: 0,
        done: 0,
        retreat: 0,
        message: 0
      },
      mobile: 0
    };
  },
  methods: {
    // 跳转到小程序的我的水票
    handleToMiniTicket() {
      //定义path
      var path = "/pages/ticket/ticket";
      //通过JSSDK的api使小程序跳转到指定的小程序页面
      wx.miniProgram.navigateTo({ url: path });
    },
    handleToMiniFenhong() {
      //定义path
      var path = "/pages/fenhong/fenhong";
      //通过JSSDK的api使小程序跳转到指定的小程序页面
      wx.miniProgram.navigateTo({ url: path });
    },
    handleLink(url) {
      this.$routerPush(this, url);
    },
    handlePhone() {
      // 拨打电话
      window.location.href = `tel:${this.mobile}`;
    },
    getUserInfo() {
      api.usercenter.getUserInfo(this.uid, res => {
        this.info = res.info;
        this.msg_count = res.msg_count;
        this.order_count = res.order_count;
      });
    },
    toUserDetail() {
      this.$routerPush(this, "/pages/mine/Setting");
    },
    getMobile() {
      api.usercenter.getMobile(res => {
        this.mobile = res.mobile;
      });
    }
  },
  mounted() {
    this.getUserInfo();
    this.getMobile();
  }
};
</script>

<style lang="less" scoped>
.bt {
  border-top: 2vw solid #f2f2f2;
}
.mine {
  background: #f9f9f9;
  margin-bottom: 21vw;
}
.wrap {
  margin-bottom: 2vw;
  background: #fff;
  .title {
    font-size: 4vw;
    padding: 4vw;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      width: 5vw;
      height: 5vw;
    }
  }
}
</style>